MENDAPAT BACKLINK GRATIS

Cara mendapat backlink otomatis.Ada yg FREE dan ada yg secara PAYMENT (berbayar).Untuk mendapatkan backlink secara otomatis disini saya akan berikan satu contoh.
#1.registrasi di www.socialmonkee.com
#2.isi username,email dan pasword
#3.klik submit form,isi type word
#4.jika sudah berhasil,utk melengkapi registrasi,buka email confirm,clik alamat link diemail.
#5.klik submit plugin,isi url anda,title.description,tag dll.
#6.jika anda member FREE,klik submit 25 site.
setiap hari anda cma submite sekali

Read More

MENAMBAH GADGET DIATAS HEADER

epg-studio.blogspot.com

Gadget diatas header.
Gadget diatas header bisa difungsikan untuk pemasangan koleksi image atau apa saja yang anda suka, bahkan dapat juga untuk pemasangan iklan, karena tempatnya startegis, terdapat dibagian paling atas yang secara langsung loadingnya paling duluan dan yang pertama dilihat oleh pengunjung blog anda.
Hanya dengan sedikit penambahan kode, blog anda memiliki tempat widget diatas header. Simak cara-caranya :

• Masuk ke Blogger dengan ID anda
• Pilih Rancangan
• Pilih Edit HTML
• Backup dulu templatenya kalau anda takut gagal
• Beri tanda contreng pada kotak disamping Expland Widget Template
• Cari kode yang mirip dengan kode dibawah ini pada template anda
  
  
  <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
</b:section>
• Perhatikan yang berwarna putih tebal. Angka 1 ganti dengan jumlah gadget yang ingin anda tampilkan (disarankan angka 1 jangan diubah) dan kata no anda ganti dengan kata yes Setelah anda ubah kata yang berwarna putih tebal, copy kode dibawah ini dan letakan tepat dibawah kode <div id='header-wrapper'>
  
  
  <b:section class='header' id='topheader' preferred='yes'/>
• Setelah digabungkan kodenya menjadi seperti ini :
  
  
  
  <div id='header-wrapper'>
<b:section class='header' id='topheader' preferred='yes'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
</b:section>
• Klik tombol Simpan Template
• Lihat pada Elemen Halaman
• Setelah muncul Tambah Gadget diatas header, sekarang cobalah anda tambah widget atau apa saja yang ingin anda tampilkan diatas header
• Selesai
• Selamat mencoba .....semoga bermanfaat.

Read More

BACKGROUND JUDUL POST BERUBAH WARNA KETIKA MOUSE BERADA DIATASNYA

epg-studio.blogspot.com

  Untuk memahami judul post ini, coba anda arahkan mouse ke atas judul post. Anda akan melihat perubahan warna latar belakang (background) judul post yang semula biru tua berubah menjadi biru agak kehitaman. Perubahan itu dikarenakan penambahan kode a hover pada bagian judul post (h3).
Blog anda juga bisa dibuat seperti penampilan EPG Studio, tentunya dengan warna lain yang anda sukai
Anda langsung saja ke langkah-langkahnya :

• Masuk ke Blogger dengan ID anda.
• Pilih Rancangan, kemudian kilk Edit HTML.
• Back up dulu template anda kalau takut gagal.
• Cari kode dibawah ini :
  
  
  .post h3 {
margin:.25em 0 0;
padding:4px 4px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:#0066CC;
border:0px solid #C3D9FF;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}
• Copy kode dibawah ini kemudian paste tepat dibawah kode yang berwarna merah
  
  
  .post h3 strong, .post h3 a:hover {
color:$textcolor;
background:#003366;
• Ganti kode warna yang berwarna merah dengan kode warna yang anda sukai
• Klik tombol Simpan Template.
• Lihat blog anda sekarang.

Read More

MEMBUAT TEKS BERJALAN PADA NAVBAR ATAS

epg-studio.blogspot.com

Variasi yang dapat anda pasang pada blog yang anda sayangi berbagai ragam bentuknya. Salah satunya adalah teks berjalan pada navbar bagian atas.
Tidak sulit dalam membuatnya, anda hanya memerlukan penambahan beberapa kode kedalam Template.
Ikuti langkah-lanhkahnya :

• Sign ke Blogger dengan ID anda.
• Pilih Rancangan.
• Pilih Edit HTML.
• Cari kode ini : <b:skin><![CDATA[/*
• Copy seluruh kode dibawah ini dan pate tepat diatas kode tadi.
  
  
  
  <script language='JavaScript'>
var txt=&quot;. . : : Selamat Datang di EPG Studio...Tempatnya Berbagi Ilmu dan Pengalaman.... : : . .&quot;;
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
</script>
• Ganti teks yang berwarna merah dengan teks yang anda inginkan
• Ganti angka pada var kecepatan=100 dengan angka yang anda inginkan. Makin besar angka yang dipasang makin lambat gerakannya.
• Selesai...Selamat mencoba.

Read More

MENAMPILKAN DAFTAR ISI LENGKAP DENGAN TABEL

epg-studio.blogspot.com

Membuat daftar isi dari sebuah blog sudah banyak ditulis di berbagai blog tutorial. Hanya saja, sebagian dari cara yang dikemukakan tidak menampilkan seluruh daftar isi yang ada pada blog.
Tips kali ini juga merupakan cara membuat daftar isi blog secara lengkap yang ditampilkan dalam bentuk tabel.
Post ini diperoleh dari sumbernya aslinya yaitu : BEAUTIFUL BETA
Ikuti langkah-langkah dibawah ini bagi anda yang ingin mencoba.

• Langkah Pertama
1. Masuk ke Blogger dengan ID anda.
2. Pilih Rancangan.
3. pilih Edit HTML.
4. Back up dulu templatnya jika takut gagal.
5. Cari kode ini : ]]></b:skin>
6. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi.
   
   
   #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
7. Klik Tombol Simpan Template
• Langkah Kedua
1. Masuk ke Elemen Halaman.
2. Pilih Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   
   <div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZ0qsIrPdQI/AAAAAAAACVI/m_NGy4DuSvc/add2.png"/><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
</div>
<script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/blogtoc.js"></script>
<script src="http://namablog anda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<div id="toc"></div>
5. KLik tombol Simpan
• Selesai.
• Selamat mencoba, semoga bermanfaat.

Read More

MEMBUAT DAFTAR ISI LENGKAP DENGAN FILE JS

epg-studio.blogspot.com
Membuat daftar isi blog secara manual pada bagian sidebar blog sangat melelahkan, apalagi jika postingan artikel jumlahnya sudah ratusan. Untuk mengatasi masalah tersebut, anda dapat membuatnya dengan sangat mudah yaitu dengan menggunakan file Java Script ( js ). Trik membuat daftar isi kali ini selain menampilkan judul seluruh postingan artikel juga judul postingan tersebut terpisah berdasarkan label dari postingan tersebut.
Satu lagi...postingan yang baru dipublikasikan, secara otomatis ditambah kata New!! berwarna merah yang letaknya disebelah kanan judul postingan.
Pokoknya trik yang satu ini akan memuaskan anda jika ditampilkan pada blog anda dan tentunya akan lebih memudahkan pengunjung mendapatkan artikel yang dicarinya tanpa harus bersusah payah.
Langkah-langkahnya :

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik tambah gadget.
4. Pilih HTML/JavaScript.
5. Copy script dibawah ini dan paste pada kolom yang tersedia.
   
   
   <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
<script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   
   
   Ganti http://epg-studio.blogspot.com dengan URL blog anda
6. Klik tombol Simpan.
7. jika daftar isi terlalu panjang, tambahkan fungsi scroll, sehingga kodenya seperti ini :
   
   
   
   <div style="overflow:auto;width:300px;
height:200px;padding:10px;
border:1px solid #eee">
<script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
<script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   </div>
8. Anda atur ukuran width dan height sesuai keperluan.

Sumber : abu-farhan.com

Read More

MEMBUAT SIDEBAR JADI 2

epg-studio.blogspot.com
Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan.
Perlu diingat kode yang ditampilkan pada tips ini merupakan kode yang berasal dari template Tata Letak. Jadi jika anda kesesulitan menemukan kodenya berarti templatenya berbeda.

Langkah pertama

1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML
3. Cari Kode dibawah ini (biasanya berada dibagian atas)
   
   
* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding-left:10px; (tambahkan kode ini biar tampak ada jarak sela)
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

4. Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.
5. Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi
   
   #sidebarbaru-wrapper {
width: 200px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
6. Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.
   
   
#sidebarbaru-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Langkah Kedua

1. Masih pada bagian Edit HTML
2. Cari kode HTML dibawah ini pada bagian body
   
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
3. Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?
   
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
4. Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
5. Silahkan lihat hasilnya !
6. Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper, sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita. Lihat Klik disini untuk mengubah lebar sidebar.
7. Selamat mencoba, semoga bermanfaat...

Read More

MENYISIPKAN IMAGE PADA JUDUL SIDEBAR

epg-studio.blogspot.com

Judul sidebar dapat kita atur penampilannya sesuai dengan keinginan pengelola sebuah blog, baik dalam penampilan huruf maupun penambahan lainnya semisal penyisipan gambar.
DEMO ; Lihat judul Sidebar pada EPG Studio.
Sebenarnya trik semacam ini telah dibahas pada beberapa Tutorial EPG Studio sebelumnya, namun tidak ada salahnya dibuat lagi secara khusus, karena mungkin sebagian dari peblogger malas mencari tutorial berkenaan.
Caranya sangat mudah, silahkan anda ikuti langkah-langkah dibawah ini.

• Login ke Blogger dengan ID anda.
• Masuk ke bagian Rancangan kemudian pilih tab Edit HTML.
• Cari kode untuk judul sidebar (h2) seperti dibawah ini :
  
  .sidebar h2 {

font-size:100%;

color:#ffffff;

font-weight:bold;

text-transform:uppercase;

text-align:center;

border: 3px solid #000033;

background:#000033
• Perhatikan yang berwarna merah yang merupakan kode warna latar dari judul siebar.
• Siapkan sebuah gambar kecil kemudian upload pada host penyimpan gambar seperti : photobucket atau lainnya.
• Copy link dari gambar tersebut :
• Contoh gambar kecil yang dimaksud
  
  
• Tambahkan kode ini setelah kode background:#000033 :
  
  url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
  
  kode yang berwarna merah merupakan link dari gambar kecil tadi.
• Secara lengkap background tersebut menjadi :
  
  background:#000033 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
• Klik tombol Simpan Template.
• Lihat Judul Sidebar blog anda sekarang.

Read More

TAB MENU HORIZONTAL DENGAN CSS VERSI 4

 epg-studio.blogspot.com


Bagi anda yang memiliki blog dengan latar belakang gelap seperti EPG Studio, agar tampilannya tambah gelap sangat cocok menggunakan tab meu horizontal versi 4 ini.
Dengan latar belakang berwarna hitam ditambah dengan dua gambar yang juga warna gelap yaitu merah tua dengan hover merah kehitaman akan mejadikan tampilan blog anda semakin gelap.

Demo : perhatikan contoh dibawah ini :




CARA MEMBUATNYA

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih TML/Javascript
5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   <style type="text/css">

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs a span {float:none;}

#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

</style>
<div id="tabs">
<ul>
<li><a href="Url/alamat link target 1"><span>MENU 1</span></a></li>
<li><a href="Url/alamat link target 2"><span>MENU 2</span></a></li>
<li><a href="Url/alamat link target 3"><span>MENU 3</span></a></li>
<li><a href="Url/alamat link target 4"><span>MENU 4</span></a></li>

<li><a href="Url/alamat link target 5"><span>MENU 5</span></a></li>
<li><a href="Url/alamat link target 6"><span>MENU 6</span></a></li>
<li ><a href="Url/alamat link target 7"><span>MENU 7</span></a></li>
<li><a href="Url/alamat link target 8"><span>MENU 8</span></a></li></ul>
</div>
   
   
   1. Pengeditan kode dapat anda lakukan dengan memperhatikan kode yang berwarna ungu muda, ungu tua, merah dan kuning
   2. Kode berwarna ungu muda : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/ merupakan alamat gambar untuk latar 1. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :
      
      
   3. Kode yang berwarna ungu tua : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/ merupakan alamat gambar untuk latar 2. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :
      
      
   4. Kode bermarna merah : Url/alamat link target 1, 2, 3, 4, 5, 6, 7 dan 8 merupakan URL/alamat link target (jika menu diklik akan terbuka halaman lain sesuai URL/alamat link target yang anda pasang). Ganti kode tersebut dengan URL/alamat link target yang ingin anda tampilkan.
   5. Kode berwarna kuning : MENU 1,2 , 3, 4, 5, 6, 7dan 8 merupakan menu yang akan tampil pada tab menu. Ganti kode tesebut dengan menu yang ingin anda tampilkan.
   6. Jumlah menu yang ditampilkan pada tab menu horizontal versi 4 ini sebanyak 8 menu. Anda dapat menambah jumlah menu tersebut sesuai dengan keinginan.
6. Setelah selesai pengeditan kode diatas, klik tombol Simpan
7. Lihat tab menu horizontal pada blog anda.

Read More

TAB MENU HORIZONTAL DENGAN CSS VERSI 3

epg-studio.blogspot.com


Tampil cantik dengan perpaduan warna merah muda, tab menu horizontal dengan css versi 3 ini sangat cocok untuk blog yang dikelola oleh wanita karena secara umum, wanita menyukai warna lembut terutama warna pink.
Tab menu horizontal versi 3 pada dasarnya sama dengan tab menu horizontal versi sebelumnya, yaitu menggunakan latar berupa gambar sebanyak dua buah dan hover (warna yang tampil waktu disorot mouse) adalah warna putih.

Demo : perhatikan gambar di bawah ini

LANGKAH-LANGKAHNYA

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy kode dibawah in kemudian paste pada kolom yang tersedia
   
   <style type="text/css">

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

img {
border: none;
}

#tabs {
float:left;
width:100%;
background:#FCF1F6;
font-size:93%;
line-height:normal;
border-bottom:1px solid #E276A7;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;
}
#tabs a span {float:none;}

#tabs a:hover span {
color:#591333;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

</style>
<div id="tabs">
<ul>

<li><a href="URL/link target menu 1"><span>Menu 1</span></a></li>
<li><a href="URL/link target menu 2"><span>Menu 2</span></a></li>
<li><a href="URL/link target menu 3"><span>Menu 3</span></a></li>
<li><a href="URL/link target menu 4"><span>Menu 4</span></a></li>
<li><a href="URL/link target menu 5"><span>Menu 5</span></a></li>
<li><a href="URL/link target menu 6"><span>Menu 6</span></a></li>
<li><a href="URL/link target menu 7"><span>Menu 7</span></a></li></ul>
</div>
   
   
   1. Kode yang berwarna pink muda, pink tua, merah dan kuning merupakan kode yang harus anda ganti.
   2. Kode dengan warna pink muda : https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif merupakan kode dari gambar latar 1. Ganti kode tersebut dengan gambar milik anda sendiri. Ini tampilan gambarnya :
      
      
   3. Kode dengan warna pink tua : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif merupakan kode gambar latar 2. Ganti kode tersebut dengan gambar simpanan anda sediri. Ini tamplannya :
      
      
   4. Kode dengan warna merah : URL/link target menu 1, 2, 3, 4, 5, 6 dan 7 merupakan kode untuk URL/alamat link target dari setiap menu. Ganti dengan URL yang ingin anda jadikan link target.
   5. Kode dengan warna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan kode untuk menu yang ingin anda tampilkan '
   6. Jika jumlah menu dari kode diatas masih dianggap kurang, silakan anda tambah secukupnya setelah anda memahami kode yang harus ditambahkan.
6. Klik tombol Simpan setelah selesai pengeditan kode.
7. Lihat tab menu horizontal pada blog anda.

Read More

TAB MENU HORIZONTAL DENGAN CSS VERSI 2

epg-studio.blogspot.com

Tab menu dengan CSS versi 2 memiliki sedikit perbedaan dari versi 1. yaitu terletak pada penambahan dua gambar sebagai latar belakang.
Tampilan secara umum berwarna abu-abu muda, kecuali menu pertama berwarna biru. Agar tampilannya lebih menarik setiap menu akan berubah warna jika disorot mouse yaitu tampil dengan warna yang sama seperti menu menu pertama.

Demo : Perhatikan gambar dibawah ini :




Jika berminat dengan Tab Menu dengan CSS versi 2, ikutilangkah-langkahnya :

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy code dibawah ini kemudian paste pada kolom yang tersedia
   
   <style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
#tabsJ a span {float:none;}
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}

</style>
<div id="tabsJ">
<ul>
<li id="current"><a href="URL/alamat menu 1"><span>Menu 1</span></a></li>
<li><a href="URL/alamat menu 2"><span>Menu 2</span></a></li>
<li><a href="URL/alamat menu 3"><span>Menu 3</span></a></li>
<li><a href="URL/alamat menu 4"><span>Menu 4</span></a></li>

<li><a href="URL/alamat menu 5"><span>Menu 5</span></a></li>
<li><a href="URL/alamat menu 6"><span>Menu 6</span></a></li>
<li><a href="URL/alamat menu 7"><span>Menu 7</span></a></li></ul>
</div>
   
   1. Kode yang berwarna ungu, pink, merah dan kuning adalah kode yang harus anda ganti
   2. Kode berwarna ungu : https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif merupakan alamat gambar latar 1, ganti alamat gambar tesebut dengan gambar milik anda. Ini tampilannya :
      
      
   3. Kode berwarna pink : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif merupakan alamat gambar latar 2, ganti dengan gambar milik anda. Ini tampilannya :
      
      
   4. Kode berwarna merah : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu/label dari blog anda. Ganti dengan menu yang ingin ditampilkan,
   5. Kode berwarna kuning : URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari menu. Ganti dengan URL dari menu yang ingin anda tampilkan.
   6. Jika anda ingin menambah dengan beberapa menu lainnya, terlebih dulu harus memahami kode yang harus ditambahkan
6. Setelah selesai pengeditan kode, klik tombol Simpan
7. Lihat blog anda

Read More

TAB MENU HORIZONTAL DENGAN CSS VERSI 1

epg-studio.blogspot.com


Membuat tab menu dengan menggunakan CSS (Cascading Style Sheet) atau kode sebagai pelengkap dari HTML yang berfungsi untuk menambah keindahan tampilan blog/situs.
CSS memiliki kelebihan dibanding java script yaitu tidak mengakibatkan blog menjadi berat waktu loading.
Tab menu dengan CSS ini jika waktu memungkinkan akan dibuat beberapa versi dengan tampilan yang berbeda satu sama lainnya.
Sebagai permulaan, dibawah ini merupakan cara menampilkan tab menu dengan CSS bagian 1.

Demo : Perhatikan gambar dibawah ini :




Jika anda tertarik dengan tampilan tab menu versi 1 ini, ikuti langkah-langkahnya :

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik Tambah gadget
4. Pilih HTML/Javascript
5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   <style type="text/css">
#navcontainer {
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body
#navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body
#navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

</style>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="URL/alamat menu 1">Menu 1</a></li>
<li><a href="URL/alamat menu 2">Menu 2</a></li>
<li><a href="URL/alamat menu 3">Menu 3</a></li>
<li><a href="URL/alamat menu 4">Menu 4</a></li>
<li><a href="URL/alamat menu 5">Menu 5</a></li>
<li><a href="URL/alamat menu 6">Menu 6</a></li>
<li><a href="URL/alamat menu 7">Menu 7</a></li></ul>
</div>
6. Kode yang berwarna kuning dan merah ganti dengan apa yang ingin anda tampilkan
   
   1. Kode yang berwarna merah yaitu : URL/alamat menu 1,2 ,3 ,4, 5. 6 dan 7 ganti dengan menu atau label pada blog anda.
   2. Kode yang berwarna kuning yaitu : Menu 1, 2, 3, 4, 5, 6 dan 7 ganti dengan URL/alamat link target dari menu
7. Jika jumlah menu yang ditampilkan masih kurang, anda dapat menambah beberapa menu lainnya dengan catatan, pahami dulu kode dari setiap menu pada contoh.
8. Setelah selesai pengeditan, klik tombol Simpan
9. Lihat hasilnya

Selamat mencoba, semoga berhasil.....

Read More

MENAMPILKAN LABEL DALAM TAB MENU

epg-studio.blogspot.com

LAbel sebuah blog semakin lama akan semakin banyak sesuai dengan isi postingan yang ada pada blog tersebut. Untuk menampilkan label tersebut ada beberapa cara, misalnya dengan menggunakan tehnik Label Clouds atau dapat juga menampilkan label yang telah disediakan oleh Blogger/Blogspot dengan cara : Dasbor, Tata Letak, Elemen Halaman, Tambah Gadget, Pilih Label dan Simpan.
Selain dengan kedua cara diatas, anda juga dapat menampilkan label dalam deretan tab menu, baik menu horizontal, vertikal maupun dropdown. Pempilannya tergantung dari pilihan dan kreatifitas anda.
Untuk anda yang belum memiliki software untuk membuat tab menu silahkan download disini (CSS MENU GENERATOR) dan disini (CSS TAB DESIGNER)
Sebagai contoh cara menampilkan label, berikut ini langkah-langkah yang dapat anda lakukan untuk menampilkan label dalam menu dropdown. Untuk penampilan lainnya, silahkan gunakan software yang telah anda download tadi.

• Siapkan kode untuk tab menu dropdown sperti dibawah ini :
  
  <select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>LABEL EPG STUDIO</option>
<option value="Alamat Label 1">Nama Label 1</option>
<option value="Alamat Label 2">Nama Labe 2</option>
<option value="Alamat Label 3">Nama Labe 3</option>
<option value="Alamat Label 4">Nama Labe 4</option>
</select>
  
  Cara mengedit kode diatas adalah sebagai berikut :
  
  1. Cara mendapatkan alamat label dapat anda lakukan dengan cara : klik kanan pada label blog anda yang ada di halaman postingan kemudian pilih copy dan paste pada alamat Label 1 sampai 4.
  2. Tulisan Nama Label 1 sampai 4 diganti nama label yang sesuai dengan alamat label
• Sebagai contoh perhatikan pengisian label EPG Studio dibawah ini :
  
  <select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>LABEL EPG STUDIO</option>
<option value="http://epg-studio.blogspot.com/search/label/SOFTWARE%20GRATIS">SOFTWARE GRATIS</option>
<option value="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER</option>
<option value="http://epg-studio.blogspot.com/search/label/ASESORIS%20BLOG">ASESORIS BLOG</option>
<option value="http://epg-studio.blogspot.com/search/label/TRAFFIC%20BLOG">TRAFFIC BLOG</option>
</select>
• Contoh diatas akan terlihat seperti ini (Coba anda klik untuk melihat hasilnya.
  
  
  LABEL EPG STUDIOSOFTWARE GRATISTUTORIAL BLOGGERASESORIS BLOGTRAFFIC BLOG
• Setelah anda berhasil menampilkan label dengan tab menu dropdown, coba sekarang gunakan software pembuat tab menu untuk mendapatkan penampilan yang berbeda.

Read More

MEMBUAT TAB MENU HORIZONTAL

Sebuah blog akan menjadi kurang lengkap jika belum dipasang tab menu yang dapat dijadikan pedoman oleh pengunjung untuk melihat menu yang terdapat dalam blog tersebut.
Sebenarnya banyak cara untuk menampilkan menu misalnya : MEMBUAT LABEL BERPUTAR (LABEL CLOUDS) , MENGHEMAT HALAMAN POSTINGAN DENGAN DROPDOWN MENU , MENAMPILKAN LABEL DALAM TAB MENU
Atau dapat juga dengan cara membuat sendiri dengan sofware khusus untuk membuat tab menu. Silahkan anda lihat di CARA MEMBUAT TAB MENU atau MEMBUAT TAB MENU DENGAN CSS TAB GENERATOR dan MEMBUAT TAB MENU DENGAN CSS MENU GENERATOR
Semua link diatas merupakan cara untuk menampilkan menu yang terdapat dalam sebuah blog.
Jika anda ingin menampilkan tab menu yang sudah jadi (tab menu yang digunakan EPG Studio), tinggal copy kode dibawah ini kemudian masukan pada blog anda.
Cara memasukkan kode kedalam blog seperti biasa : Masuk ke Blogger, Rancangan, Elemen Halaman, Tambah Gadget, Klik tanda + pada HTML/JavaScript, Paste kode pada kolom yang tersedia, Simpan
Kodenya seperti ini, silahkan anda copy :


<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml>
<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #6C82B5;
border-top: 5px solid #32527A;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0px;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 0px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background:#999999;
border: 1px solid #FFF;
bottom: 10px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #e6e6e6;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: pink;
bottom: 0px;
color: blue;
position: relative;
right: 0px;
}

#navlist li#active {
background:#369 ;
bottom: 1px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 2px 0 2px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #808080;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 10;
color: ;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
-->
</style>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER </a></li>
<li><a href=" http://www.blogger.com/profile/14536802221205706514" target="_balnk">PROFIL ADMIN</a></li>
<li><a href="http://bloglambirday.blogspot.com" target="_blank">AYAH BUNDA</a></li>
<li><a href="http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD">FREE DOWNLOAD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html">TUKERAN LINK</a></li>
<li><a href="http://epg-studio.blogspot.com/search?max-results=999"><blink>DAFTAR ISI</blink></a></li>
<li><a href="http://epg-studio.blogspot.com/2008/07/koleksi-award-epg-studio.html">KOLEKSI AWARD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/08/buku-tamu.html">BUKU TAMU</a></li></ul>
</div>
</!doctype>

COBA ...............AJAH

Read More

PENGATURAN TABEL BLOGGER

epg-studio.blogspot.com


Fokus pengaturan tabel terletak pada bagian <table border="1" align="left"> serta pada bagian ini <tr> dan <td>.
Dari kode diatas dapat kita lihat bahwa tabel tersebut memiliki border/ketebalan garis 1px dan tabel itu diletakan pada bagian kiri dari postingan. Sedangkan pada bagian baris dan kolom belum ada pengaturan.
Beberapa pengaturan tambahan dapat kita masukkan kedalam tabel, diantaranya :

1. Width : untuk pengaturan lebar dari tabel . Anda dapat mengisi width tersebut disesuaikan dengan keinginan anda. Jika width tidak dicantumkan, lebar tabel akan mengikuti dari banyaknya kata dalam tabel tersebut secara otomatis.
   Contoh kode tabel yang tidak memakai width :
   
   
<table border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>
   
   Tabel akan terlihat seperti ini :
   
   

   isi tabel disini

   
   
   Contoh kode tabel yang memakai width :
   
   <table width="200" border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>
   
   Tabel akan terlihat seperti ini :
   
   

   isi tabel disini

   
   
2. Border : untuk mengatur penampilan garis tabel. Anda dapat menggunakan border sesuai keperluan anda. Border tersebut juga bisa dihilangkan dengan mencantumkan border="0" atau menebalkan border misalnya border="4"
   
   Contoh kode tabel tanpa pengaturan width dan dipasang border pada ukuran 4px
   <table border="4" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>
   
   Tabel terlihat seperti ini :
   
   

   isi tabel disini

3. Align : merupakan pengaturan letak tabel jika ditambahkan pada bagian <> dan jika diletakan pada kode <td>maka fungsinya sebagai pengatur letak tulisan pada sel. Align dapat kita isi dengan left, right, center dan justify.
   
   Contoh kode yang ditambahkan kode align :
   
   <table width="200" border="1" align="center"><tbody><tr><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>
   
   
   Tabel akan kelihatan seperti ini :
   
   

   isi tabel disini

   isi tabel disini

   
   
4. Bgcolor : merupakan pengaturan warna tabel. Anda dapat memvarisiasikan warna tersebut pada tabel yang anda buat.
   
   Contoh kode tabel yang telah ditambah kode warna :
   
   <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>
   
   Pengaturan diatas : Tabel terdiri dari satu baris dua kolom dengan lebar 400 px(masing-masing kolom 200px), border 1px dengan warna garis hitam, letak tabel ditengah, Warna baris kuning, sel pertama letak huruf ditengah dan sel kedua letak huruf dikiri
   
   Tabel akan terlihat seperti ini :
   
   

   isi tabel disini

   isi tabel disini

5. Untuk menambah baris (row), anda tinggal menambahkan kode dibawah seperti ini :
   
   </tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr> yang diletakkan setelah kode ini :</td></tr>
   
   Contoh : perhatikan yang berwarna kuning.
   
   <table width="400" border="1" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>
   
   Jadinya akan seperti ini:
   
   

   isi tabel disini	isi tabel disini
   isi tabel disini	isi tabel disini

6. Untuk menambah kolom anda tinggal menambahkan kode ini;<td>isi tabel</td> pada kode yang sama disebelah kanan atau kiri
   Contoh(perhatikan berwarna kuning)
   
   <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>
   
   Jadinya akan seperti ini :
   
   

   isi tabel disini	isi tabel disini	isi tabel disini
   isi tabel disini	isi tabel disini	isi tabel disini

7. Selamat mencoba...!!!
   Jika anda belum memahami uraian diatas coba anda copy contoh-contoh dari postingan ini dan paste pada postingan anda. Baru anda lakukan pengeditan sesuai keperluan anda.

SELAMAT .........NYOBA

Read More

CARA MEMBUAT TABEL

epg-studio.blogspot.com

Sebuah tabel yang ditampilkan, baik pada sebuah postingan maupun pada bagian lain dari sebuah blog akan membantu memperindah blog dan kerapian dari blog itu semakin baik.
Untuk membuat tabel, kita harus mengetahui terlebih dulu kode-kode yang digunakan dalam sebuah tabel.
Anda belum tahu caranya...??, ikuti kelanjutannya.

1. Kode Utama dari tabel adalah:
   
<table border="1" align="left"><tbody>.....</table>
2. Kode untuk row/baris adalah:
   
<tr>..........</tr>
3. Kode untu kolom/column adalah :
   
<td>.........</td>
4. Kode-kode diatas, jika kita gabungkan akan menghasilkan satu baris dan satu kolom. Jadinya seperti ini :
   
<table border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>
   Kode-kode diatas akan terlihat seperti ini:
   
   

   isi tabel disini

5. Jika anda ingin menambah baris dan kolom, anda hanya perlu menambahkan kode < <tr>...</tr> dan kode <td>...</td>
   
   Contoh kode table dengan satu baris dan 2 kolom:
   <table border="1" align="left"><tbody><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr></table> Perhatikan letak dari <td>
   
   Tabelnya akan terlihat seperti ini:
   
   

   isi tabel disini

   isi tabel disini

   
   
   Contoh tabel dengan 2 baris dan dua kolom :
   
   <table border="1" align="left"><tbody><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr></table>
   
   Tabel terlihat seperti ini :
   
   

   isi tabel disini	isi tabel disini
   isi tabel disini	isi tabel disini

   
   
6. Setelah memahami kode-kode diatas, sekarang anda dapat membuat tabel dengan jumlah baris dan kolom yang anda kehendaki
7. Selamat mencoba....dan untuk pengaturan penampilan tabel dapat anda lihat disini.

Read More

CARA MEMBUAT LINK PADA POSTINGAN

epg-studio.blogspot.com

Link pada sebuah blog sangat diperlukan, baik untuk kepentingan blog itu sendiri maupun untuk kepentingan orang lain.Misalnya tukaran link sesama blogger atau link untuk download dll.
Kita perhatikan link dalam sebuah artikel. Misalnya Jika anda anda ingin memiliki buku tersebut klik disini untuk mendapatkannya.
Untuk membuat link seperti contoh diatas, ikuti langkah-langkah berikut.

1. Block atau highlight kata atau kalimat yang ingin dibuat link (Contoh diatas adalah klik disini).
2. Klik icon dengan gambar seperti ini pada toolbar dan muncul sebuah kotak dialog seperti ini.
   
3. Isi kotak bertuliskan http:// dengan alamat situs yang kita inginkan. Misalnya :http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html
4. Klik OK selesai.

Contoh diatas, jika link-nya kita klik maka halaman yang diklik tadi akan muncul menggantikan/menimpa halaman sebelumnya. Tentu akan berefek kurang baik bagi blog kita karena secara umum link yang kita pasang merupakan alamat dari situs-situs lain. Dalam arti lain pengunjung meninggalkan blog kita.
Untuk menghidari hal tersebut, kita pilih alternatif lain yaitu jika pengunjung mengklik link tersebut, halaman baru/window baru akan muncul. Sementara halaman blog anda tetap seperti asalnya.
Langkah-langkahnya silahkan anda simak berikut ini.

1. Pasang postingan pada menu Edit HTML dengan gambar seperti ini
2. Link yang tadi kita pasang akan terlihat seperti ini
   
<a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"> klik disini </a>
3. Tambahkan kata target="new" atau target="_blank" pada bagian akhir dari alamat situs. Jadinya akan seperti ini
   
<a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"target="new> klik disini </a>
   
   atau seperti ini
   
<a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"target="_blank> klik disini </a>
   
4. Contoh :
   
   Jika anda berminat silahkan klik disini untuk menuju situs tersebut.

SELESAI.............COBA AJAH

Read More

MENAMBAHKAN LIVE TRAFFIC FEED PADA BLOG

epg-studio.blogspot.com

Live Traffic Feed dari situs life.feedjit.com diperlukan bagi sebuah blog yang berguna untuk mengetahui dari mana datangnya pengunjung ke blog yang kita kelola juga dapat mempercantik penampilan blog. Terdapat 2 widget utama yang dapat kita tambahkan pada blog, yang pertama berupa keterangan asal pengunjung dan apa yang dikunjunginya yang disertai dengan gambar bendera negara pengunjung. Yang kedua berupa tampilan peta dengan noktah berwarna merah berupa lokasi asal pengunjung. Jika pointer diarahkan kenoktah merah, akan mucul tulisan lokasi asal pengunjung blog.

Untuk anda yang ingin menambahkan kedua widget diatas, ikuti langkah-langkah berikut ini.

1. Kunjungi link : http://feedjit.com
2. Klik get feedjit setelah anda berada di situs tersebut.
3. Klik salah satu pilihan Javascrift widget atau Image Widget.
4. Agar tidak terlalu berbelit-belit, kami memilihkan untuk anda yaitu klik Javasrift widget yang letaknya bagian bawah.
5. Pada halaman berikutnya anda akan melihat 4 tampilan widget. pilih salah satunya sesuai dengan keinginan anda.
6. Tampilan warna dapat kita ubah dengan mengklik First Costumize it. setelah muncul kotak dialognya, silahkan anda pilih penampilan warna yang sesuai.
7. Selesai mengotak-atik warna, klik Add to your Blogger blog atau Typepad blog.
8. Blogger : Menambah Elemen Halaman akan muncul, silahkan anda masukan nama blog seta judul dari widget dan menambahkan kode lainnya, misal : pada edit konten tambahkan <center>pada awal kode HTML dan </center> pada akhir kode HTML agar widget berada ditengah-tengah sidebar.
9. Klik menambah widget.
10. Silahkan anda lihat blog anda sekarang

Untuk widget lainnya lakukan langkah-langkah seperti diatas.
Selamat mencoba...!!

Read More

HEADER TAMPIL DUA KOLOM

epg-studio.blogspot.com


C oba anda perhatikan bagian header EPG Studio. Bagian tersebut terdiri dari header dan widget lainnya atau dalam istilah lainnya " Header terdiri dari dua bagian "Tambahan baru pada bagian header ini dapat anda isi dengan berbagai widget yang disesuaikan dengan keinginan anda.
Berikut langkah-langkahnya :

• LANGKAH PERTAMA
1. Masuk ke Blogger dengan ID anda.
2. Klik Rancangan kemudian pilih Edit HTML.
3. Simpan dulu template anda dengan dengan cara klik Download Template Lengkap jika takut gagal
Cari kode css bagian header seperti dibawah ini :
/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }
4. Hapus kode css diatas kemudian ganti dengan kode css dibawah ini :
   
   
   /* Header =================================== */
#header-wrapper {
width:1000px;
margin:0 auto 0px;
background:$bgheadercolor
height:190px;
}
#head-inner {
width:500px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:500px;
float:left;
padding-top:10px;
}
   
   • Perhatikan kode-kode yang berwarna, terutama pada ukurannya, ganti ukuran tersebut sesuai dengan keinginan anda.
   • width:1000px; : merupakan ukuran header secara kesuluruhan
   • #header-inner {
     width:500px; : merupakan ukuran header yang baru tempat menampilkan gambar pada header
   • #r_head{
     width:500px; : merupakan ukuran bagian header sebelah kanan (yang baru anda tambahkan). Bagian inilah nantinya dapat anda tambahkan widget-widget pilihan anda.

LANGKAH KEDUA

1. Cari kode seperti dibawah ini :
   
   
   <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title blog anda (Header)' type='Header'/>
</b:section>
</div>
   
2. Hapus kode tersebut kemudian ganti dengan kode dibawah ini :
   
   
   <div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title blog anda (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
   
3. Klik tombol Simpan Template
4. Sekarang coba anda lihat Rancangan pada bagian Elemen Halaman jika berhasil anda akan melihat tampilan baru pada bagian header blog anda. Silahkan anda isi sesuatu pada header bagian kanan tersebut.
5. Tampilan Elemen Halaman akan terlihat seperti gambar dibawah ini :
   
   
6. Selamat mencoba semoga bermanfaat.

Read more: http://epg-studio.blogspot.com/2010/09/header-tampil-dua-kolom.html#ixzz1Yvx345ER

Read More

MENAMBAH WIDGET DIBAWAH JUDUL POST

MENAMBAH WIDGET DIBAWAH JUDUL POST

epg-studio.blogspot.com
 Menambahan widget dibawah judul postingan dapat difungsikan untuk menampilkan widget yang memiliki kepentingan lebih dari widget-widget lainnya. Misalnya widget iklan atau jenis widget lainnya yang menurut anda penting.
Penempatan widget di bawah postingan ini akan muncul di setiap judul postingan yang ada pada blog anda. Blog anda memiliki 100 judul postingan maka widget itupun akan tampil dengan jumlah yang sama.
Jika anda tertarik untuk menampilkannya, simak caranya...!

• Siapkan sebuah widget yang akan ada tampilkan di bawah judul postingan
• Atur ukuran widget (width dan heightnya), sesuaikan dengan ukuran main wrapper.
• Ubah sript dari widget tersebut pada pharse yang dapat diterima oleh temlate.
• Untuk mempharsenya silahkan anda kunjungi situs ini : http://centricle.com
• Copy dulu script widgetnya dan paste pada kolom yang tersedia pada http://centricle.com
• Klik tombol encode untuk mengubah pharsenya.
• Setelah selesai prosesnya, copy kode yang diubah tadi dan simpan dulu pada notepad
• Masuk ke Blogger dengan ID anda
• Pilih Tata Letak
• Pilih Edit HTML
• Back up terlebih dahulu templatenya, jika anda takut gagal
• beri tanda contreng pada kotak disamping tulisan Expand Template Widget
• Cari kode ini <div class='post-header-line-1'/> kemudian copy kode yang telah dipharse tadi da paste tepat dibawah kode <div class='post-header-line-1'/>
• Klik tombol Simpan Temolate dan lihat hasilnya...!!

Read More